<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
	<title>Adv. Example: Setting and Using Styles</title>
	<link type="text/css" rel="stylesheet" href="css/examples.css" />
	<link type="text/css" rel="stylesheet" href="../os3grid.css" />
	<script src="../os3grid.js" type="text/javascript"></script>
	<script src="../form_validators.js" type="text/javascript"></script>
</head>
<body>
<div id="block_top">
	<h2 class="center">OS3Grid Advanced Example: Setting and Using Styles</h2>
	<h4 class="center">By Fabio Rotondo - fsoft (@) sourceforge ( dot ) net</h4>
</div>

<div id="block_left">
	<div class="menu_title">Examples</div>

	<div>
		<a href="index.html">Main Page</a><br />
		<a href="ex1.html">Simple Grid</a><br />
		<a href="ex2.html">Sortable Grid</a><br />
		<a href="ex3.html">Sortable Grid</a><br />
		<a href="ex4.html">Editable Grid</a><br />
		<a href="ex5.html">Custom Callbacks</a><br />
		<a href="ex6.html">Rows Selection</a><br />
	</div>

	<div class="menu_title">Advanced Examples</div>
	<div>
		<a href="adv_styles.html">Setting and Using Styles</a><br />
		<a href="adv_edit.html">Using OS3Grid to edit a dataset</a><br />
		<a href="adv_cell_manip.html">Advanced Cell Value Manipulation</a><br />
	</div>

	<div class="menu_title">Support OS3Grid</div>
	<a href="http://sourceforge.net/donate/index.php?group_id=132180" target="_blank"><img src="http://images.sourceforge.net/images/project-support.jpg" width="88" height="32" border="0" alt="Support OS3Grid" /> </a>
</div>

<div id="block_middle">
	<div>
		Since version 0.4 of OS3Grid, the user is able to define and use <i>styles</i>, a graphical
		layout of rows that can be defined by the code. Each row in the table can have its own style and
		settings are saved even when the user sorts grid rows.<br />
		Styles are a better solution than <tt>set_row_color()</tt>, because the latter requires a row number
		to be set, while styles are dynamically linked to rows.<br />
		By default, OS3Grid provide these styles:
		<ul>
		<li><tt>normal</tt><br />
		    This is the <i>normal</i> style used to display a row. In OS3Grid, this usually equals to 
		    grey rows.
		</li>
		<li><tt>note</tt><br />
		    This style should be used to highlight rows of special importance.
		</li>
		<li><tt>warn</tt><br />
		    This style should be used for rows containing data that should be highlighted in a special
		    way to the user.
		</li>
		<li><tt>error</tt><br />
		    If you are using OS3Grid to display a report and there are errors (for example in a log file),
		    use this style to show errors.
		</li>
		</ul>

		These style are predefined, but this does not limit you with these: you can define your own.
		To define a new style, follow the example below, in which we are setting a new style <tt>yellow</tt>.

		<div class="code">
				// To set the new style, you have to define "stylename" + 0 and "stylename" + 1
				g.cols [ "yellow0" ] = "#f0dc04";
				g.cols [ "yellow1" ] = "#fcfc68";
		</div>

		To use a defined (or pre-defined) style inside your grid, you have two choices:
		<ul>
		<li><tt>g.set_style ( style_name )</tt><br />
			From this line of code, all rows added will use the defined style.
		</li>
		<li><tt>g.set_row_style ( style, [ row_num ] )</tt><br />
			You can change the style of a specific row, if [row_num] is omitted, the last row inserted
			will be affected by this call.
		</li>
		</ul>

		<div class="result">

			<div id="grid"></div>
			<script type="text/javascript">
				// Create an OS3Grid instance
				var g = new OS3Grid ( 'grid' );

				// To set the new style, you have to define "stylename" + 0 and "stylename" + 1
				g.cols [ "yellow0" ] = "#f0dc04";
				g.cols [ "yellow1" ] = "#fcfc68";

				// g.set_size ( "300", "200" );
				
				// Grid Headers are the grid column names
				g.set_headers ( 'style', 'descr' );

				// Now, we add some rows with styles
				g.current_style = 'yellow';
				g.add_row ( "yellow - 1", "this is the first yellow line" );
				g.add_row ( "yellow - 2", "this is the second yellow line" );
				g.add_row ( "yellow - 3", "this is the third yellow line" );
				g.add_row ( "yellow - 4", "this is the fourth yellow line" );

				g.current_style = 'normal';
				g.add_row ( "normal - 1", "this is the first normal line" );
				g.add_row ( "normal - 2", "this is the second normal line" );
				g.add_row ( "normal - 3", "this is the third normal line" );
				g.add_row ( "normal - 4", "this is the fourth normal line" );

				g.current_style = 'note';
				g.add_row ( "note - 1", "this is the first note line" );
				g.add_row ( "note - 2", "this is the second note line" );
				g.add_row ( "note - 3", "this is the third note line" );
				g.add_row ( "note - 4", "this is the fourth note line" );

				g.current_style = 'warn';
				g.add_row ( "warn - 1", "this is the first warn line" );
				g.add_row ( "warn - 2", "this is the second warn line" );
				g.add_row ( "warn - 3", "this is the third warn line" );
				g.add_row ( "warn - 4", "this is the fourth warn line" );

				g.current_style = 'error';
				g.add_row ( "error - 1", "this is the first error line" );
				g.add_row ( "error - 2", "this is the second error line" );
				g.add_row ( "error - 3", "this is the third error line" );
				g.add_row ( "error - 4", "this is the fourth error line" );

				// Enable sortable rows
				g.sortable = true;

				// Enable highlight of rows with the mouse
				g.highlight = true;

				// Show the grid replacing the original HTML object with the "grid" ID.
				g.render ();
			</script>
		</div>
	</div>
</div>

</body>
</html>

